import { Tabs, Input, Form, Button, Table } from "antd";
import { useRef, useState, useEffect } from "react";
import Test from "./test";
export default function AlientRebate() {
  const [activeTab, setActiveTab] = useState("1");
  const [formData, setFormData] = useState<any>({}); // 存储从接口获取的表单数据
  const formRefs = useRef<{ [key: string]: any }>({
    1: null,
    2: null,
  });
  // 请求接口并获取数据
  useEffect(() => {
    const fetchData = async () => {
      try {
        setFormData({
          开户费USD_1: 0,
          开户费USDC_1: 0,
          开户费USDT_1: 0,
          账户管理费USD_1: 0,
          账户管理费USDC_1: 0,
          账户管理费USDT_1: 0,
          开户费USD_2: 0,
          开户费USDC_2: 0,
          开户费USDT_2: 0,
          账户管理费USD_2: 0,
          账户管理费USDC_2: 0,
          账户管理费USDT_2: 0,
        }); // 设置从接口获取的数据
      } catch (error) {
        console.error("请求数据失败:", error);
      }
    };

    fetchData();
  }, []);
  const columns = [
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
      width: "20%",
      render: (value: any, row: any, index: number) => {
        const obj: any = {
          children: value,
          props: {},
        };

        // 合并单元格逻辑
        if (index === 0) obj.props.rowSpan = 5; // 法币与U币兑换
        if (index > 0 && index < 5) obj.props.rowSpan = 0;

        if (index === 5) obj.props.rowSpan = 5; // U币与法币兑换
        if (index > 5 && index < 10) obj.props.rowSpan = 0;

        if (index === 10) obj.props.rowSpan = 5; // 结汇
        if (index > 10 && index < 15) obj.props.rowSpan = 0;

        return obj;
      },
    },
    {
      title: "阶梯",
      dataIndex: "tier",
      key: "tier",
      width: "50%",
    },
    {
      title: "返点费率",
      dataIndex: "rate",
      key: "rate",
      render: (_: any, record: any) => (
        <Form.Item
          name={record.field}
          rules={[{ required: true, message: "请输入比例" }]}
        >
          <Input placeholder="请输入" suffix="%" />
        </Form.Item>
      ),
    },
  ];
  const agentTradingData = [
    {
      key: "9",
      type: "法币与U币兑换",
      tier: "10万美金以下",
      field: "rate_9",
    },
    {
      key: "10",
      type: "",
      tier: "10-100万美金",
      field: "rate_10",
    },
    {
      key: "11",
      type: "",
      tier: "100-500万美",
      field: "rate_11",
    },
    {
      key: "12",
      type: "",
      tier: "500-1000万美金",
      field: "rate_12",
    },
    {
      key: "13",
      type: "",
      tier: "1000万美金以上",
      field: "rate_13",
    },
    {
      key: "14",
      type: "U币与法币兑换",
      tier: "10万美金以下",
      field: "rate_14",
    },
    {
      key: "15",
      type: "",
      tier: "10-100万美金",
      field: "rate_15",
    },
    {
      key: "16",
      type: "",
      tier: "100-500万美",
      field: "rate_16",
    },
    {
      key: "17",
      type: "",
      tier: "500-1000万美金",
      field: "rate_17",
    },
    {
      key: "18",
      type: "",
      tier: "1000万美金以上",
      field: "rate_18",
    },
    {
      key: "19",
      type: "结汇",
      tier: "10万美金以下",
      field: "rate_19",
    },
    {
      key: "20",
      type: "",
      tier: "10-100万美金",
      field: "rate_20",
    },
    {
      key: "21",
      type: "",
      tier: "100-500万美",
      field: "rate_21",
    },
    {
      key: "22",
      type: "",
      tier: "500-1000万美金",
      field: "rate_22",
    },
    {
      key: "23",
      type: "",
      tier: "1000万美金以上",
      field: "rate_23",
    },
  ];
  // 渲染表单方法
  const renderForm = (tabKey: string) => (
    <Form
      ref={(ref) => (formRefs.current[tabKey] = ref)} // 动态赋值 ref
      layout="inline"
      style={{ width: "100%" }}
    >
      <div style={{ border: "1px solid #ddd", borderRadius: "4px" }}>
        <table style={{ width: "100%", textAlign: "center" }}>
          <tbody>
            <tr>
              <td>开户费</td>
              <td>
                <Form.Item name={`开户费USD_${tabKey}`}>
                  <Input placeholder="请输入" addonAfter="USD" />
                </Form.Item>
              </td>
              <td>
                <Form.Item name={`开户费USDC_${tabKey}`}>
                  <Input placeholder="请输入" addonAfter="USDC" />
                </Form.Item>
              </td>
              <td>
                <Form.Item name={`开户费USDT_${tabKey}`}>
                  <Input placeholder="请输入" addonAfter="USDT" />
                </Form.Item>
              </td>
            </tr>
            <tr>
              <td>账户管理费</td>
              <td>
                <Form.Item name={`账户管理费USD_${tabKey}`}>
                  <Input placeholder="请输入" addonAfter="USD" />
                </Form.Item>
              </td>
              <td>
                <Form.Item name={`账户管理费USDC_${tabKey}`}>
                  <Input placeholder="请输入" addonAfter="USDC" />
                </Form.Item>
              </td>
              <td>
                <Form.Item name={`账户管理费USDT_${tabKey}`}>
                  <Input placeholder="请输入" addonAfter="USDT" />
                </Form.Item>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </Form>
  );

  const items = [
    { key: "1", label: "企业", children: renderForm("1") },
    { key: "2", label: "个人", children: renderForm("2") },
  ];

  // 子组件数据回调
  const handleTransactionRateSubmit = (transactionData: any) => {
    console.log("从子组件获取到的数据: ", transactionData);
    const values1 = formRefs.current[1]?.getFieldsValue(true) || {};
    const values2 = formRefs.current[2]?.getFieldsValue(true) || {};
    const allValues = {
      ...formData,
      ...values1,
      ...values2,
      ...transactionData, // 合并子组件的数据
    };

    console.log("最终提交的数据: ", allValues); // 最终的提交数据
  };
  return (
    <div>
      <div style={{ fontSize: "16px", fontWeight: "bold" }}>
        开户费、管理费配置
      </div>
      <Tabs
        defaultActiveKey="1"
        activeKey={activeTab}
        onChange={(key) => setActiveTab(key)} // 更新当前选中的 Tab
        items={items}
      />
      <Test formData={formData} onSubmit={handleTransactionRateSubmit} />

      {/* 代理交易分润 */}
      <h3>代理交易分润</h3>
      <Table
        style={{ width: "580px" }}
        columns={columns}
        size="small" // 使用小号表格
        dataSource={agentTradingData}
        pagination={false}
        bordered
      />
      <Form.Item style={{ textAlign: "center", marginTop: "16px" }}>
        <Button type="primary" onClick={() => handleTransactionRateSubmit({})}>
          提交
        </Button>
      </Form.Item>
    </div>
  );
}
